@charset "utf-8";
$fontSize:100;
@function r($p){
    @return $p/$fontSize*1rem;
}
html{
    font-size: $fontSize*1px;
}
$fontSizebody: 13px;
body{
    font-size: $fontSizebody;
} 


//中部公共部分
.middle{
    width: 100%;
    box-sizing: border-box;
    background: #efefef;
    //第1块背景白
    .white_1st{
        background: white;
        padding:r(40) r(29) 0;
        //标题
        h1{font-size: 14px;}
        //点赞 浏览量
        .zan{color: #c5c5c5;
            text-align: right;
            margin-bottom: r(44);
            >span{color: #b20000;}
        }
        .paragraph,
        .paragraph_noindent{color: #8b8b8b;
            margin-bottom: r(36);
            text-align: justify;}
        .paragraph{text-indent: 2em;}
        .Black_prg,
        .B_paragraph_noindent{color: black;}
        //文章中的插图
        .m_pic{
            margin-top: r(-15);
            margin-bottom: r(36);
            >img{width: 100%;}
        }
    }
    //第2块背景白
    .white_2nd{
        background: white;
        padding:r(30) r(29) r(30);
        margin: r(30) 0 r(30);
        >p{
            >a{color:  #727171;
                font-size: $fontSizebody;
                >span{font-weight: bold;}}
        }
    }
    //第3块背景白
    .white_3rd{
        background: white;
        padding:r(40) r(29) 0;
        //图标：点赞、收藏、分享
        .reward_ico{
            width: 100%;
            font-size: 0;
            text-align: center;
            .reward_ico_alone{
                width: r(68);
                text-align: center;
                display: inline-block;
                >div>img{width: 100%;}
                >p{font-size: $fontSizebody;
                    line-height: $fontSizebody;
                    color: #8b8b8b;
                    margin-top: r(10);}
            }
            >div:nth-child(2){
                margin: 0 r(59);}
        }
        //登录后参加评论 和 发表评论按钮
        .reward_login{
            margin: r(50) 0;
            text-align: center;
            >div{
                width: 100%;
                height:r(193);
                border: 1px solid #c9c9c9;
                display: flex;
                justify-content: center;
                align-items: center;
                >p{color: #8b8b8b;
                    >a{color: #b20000;
                        text-decoration: underline;}
                }
            }
            >button{width: r(395);
                height: r(53);
                color: white;
                background:#b20000;
                margin-top: r(16);}
        }
        //评论区
        .reward_comment{
            text-align: right;
            //评论数量显示
            >p{color: #727171;
                text-align: left;
                margin-bottom: r(25);
                >a{color: #727171;
                text-decoration: underline;}
            }
            //动态区
            >ul{
                width: 100%;
                //灰色字
                .color_gray{color: #b2b2b2;}
                //第一个动态
                .dynamic{
                    padding-bottom: r(27);
                    border-bottom: 1px dashed #c9c9c9;
                    >label{font-size: 12px;
                        margin-bottom: r(2);}
                    >label>img{width: r(15);
                        vertical-align: middle;}
                    
                    //头像名字&内容 共有属性
                    .dynamic_nav,
                    .dynamic_content,
                    .dynamic_reply_core{
                        display: flex;
                        align-items: center;
                        >p:nth-of-type(2){text-align: left;}
                    }
                    //头像名字
                    .dynamic_nav{
                    >li:first-child>img{width: r(50);}
                    >li:nth-child(2){margin: 0 r(12) 0 r(9);}
                    }
                    //内容
                    .dynamic_content{
                        justify-content: space-between;
                        padding: 0 r(18);
                        font-size: 11px;}
                    //回复点击显示块
                    .dynamic_reply{
                        width: r(535);
                        background: #fafafa;
                        display: inline-block;
                        padding:r(19) r(19) r(10) 0;
                        box-sizing: border-box;
                        font-size: 9px;
                        >li{border-bottom: 1px dashed #c9c9c9;
                        margin-bottom: r(20);}
                        //回复重点内容
                        .dynamic_reply_core{
                            >div>img{width: r(40);
                            margin:0 r(15) 0 r(21);}
                        }
                        >textarea{
                            width: r(497);
                            height: r(72);
                            border: 1px solid #efefef;
                            }
                        >button{
                            width: r(174);
                            height: r(45);
                            color: white;
                            background: #b20000;
                            margin-top: r(4);}
                    
                    }
                    //点击显示功能
                    >input,.dynamic_reply_you{display: none;}
                     input[type="checkbox"]:checked~.dynamic_reply_you{display: block;}
                }
            }
        }
        //加载更多
        .loadmore{
            display: flex;
            justify-content: center;
            padding: r(18) 0 ;
        }
    }

}

//返回顶部
.icon-iconset0432{
    width: r(16);
    height: r(16);
    position: fixed;
    right: r(30);
    bottom: r(120);
    line-height: r(16);
    color: black;
}
.icon-iconset0432:hover{
    transform: rotate(360deg);
    transform-origin: center;
    transition: all .8s;
    
}
